import React, {Component} from 'react'
import {connect} from 'react-redux'
import actions from '../action/'
import {
    View,
    Text,
    StyleSheet,
    Button,
    TouchableOpacity,
    ScrollView,
} from 'react-native'
import Ionicons from 'react-native-vector-icons/Ionicons'
import Feather from 'react-native-vector-icons/Feather'
import NavigationBar from "../common/NavigationBar";
import navigatorUtil from "../navigator/navigatorUtil";
import {MORE_MENU} from "../common/MORE_MENU";
import GlobalStyles from "../res/GlobalStyles";

const THEME_COLOR = '#678'

class MyPage extends Component {
    getRightButton() {
        return (
            <View style={{flexDirection: 'row'}}>
                <TouchableOpacity onPress={() => {
                }}>
                    <View style={{padding: 5, marginRight: 8}}>
                        <Feather
                            name={'search'}
                            size={24}
                            style={{color: 'white'}}
                        />
                    </View>
                </TouchableOpacity>
            </View>
        )
    }

    getLeftButton() {
        return (
            <View style={{flexDirection: 'row'}}>
                <TouchableOpacity onPress={() => {
                }}>
                    <View style={{padding: 8, marginLeft: 12}}>
                        <Ionicons
                            name={'ios-arrow-back'}
                            size={26}
                            style={{color: 'white'}}
                        />
                    </View>
                </TouchableOpacity>
            </View>
        )
    }

    getSettingItem(callback, text, color, Icons, icon, expandableIcon) {
        return (<TouchableOpacity
            onPress={callback}
            style={styles.settingItemContainer}
        >
            <View style={{alignItems: 'center', flexDirection: 'row'}}>
                {
                    Icons && icon
                        ? <Icons
                            name={icon}
                            size={16}
                            style={{color: color, marginRight: 10}}

                        />
                        : <View style={{opacity: 1, width: 16, height: 16, marginRight: 10}}/>
                }
                <Text>{text}</Text>
            </View>
            <Ionicons name={expandableIcon ? expandableIcon : 'ios-arrow-forward'}
                      size={16}
                      style={{marginRight: 10, alignSelf: 'center', color: color || 'black'}}/>
        </TouchableOpacity>)
    }

    getMenuItem(callback, menu, color, expandableIcon) {
        return this.getSettingItem(callback, menu.name, color, menu.Icons, menu.icon, expandableIcon)
    }

    handleClick(menu) {
        console.log('menu:',menu)
        let RouteName, params = {}
        switch (menu) {
            case MORE_MENU.Tutorial:
                console.log('enter case tutorial')
                RouteName = 'WebViewPage'
                params.title = '教程'
                params.url = 'https://coding.m.imooc.com/classindex.html?cid=89'
                break
            case MORE_MENU.About:
                RouteName = 'AboutPage'
                break
            case MORE_MENU.About_Author:
                RouteName = 'AboutMePage'
                break
        }
        if (RouteName) {
            navigatorUtil.goPage(params, RouteName)
        }
    }

    getItem(menu) {
        console.log('getItem:',menu)
        return this.getMenuItem(() => this.handleClick(menu), menu, THEME_COLOR)
    }

    render() {
        let statusBar = {
            backgroundColor: THEME_COLOR,
            barStyle: 'light-content',
            hidden: false,
        }
        let navigationBar =
            <NavigationBar
                title={'我的'}
                statusBar={statusBar}
                style={{backgroundColor: THEME_COLOR}}
                rightButton={this.getRightButton()}
                leftButton={this.getLeftButton()}
            />
        const {navigation} = this.props
        return <View style={GlobalStyles.root_container}>
            {navigationBar}
            <ScrollView>
                <TouchableOpacity
                    onPress={() => this.handleClick(MORE_MENU.About)}
                    style={styles.item}
                >
                    <View style={styles.about_left}>
                        <Ionicons
                            name={MORE_MENU.About.icon}
                            size={40}
                            style={{marginRight: 10, color: THEME_COLOR,}}
                        />
                        <Text>GitHub Popular</Text>
                    </View>
                    <Ionicons name={'ios-arrow-forward'} size={16}
                              style={{marginRight: 10, alignSelf: 'center', color: THEME_COLOR}}/>
                </TouchableOpacity>
                <View style={GlobalStyles.line}></View>
                {
                    this.getItem(MORE_MENU.Tutorial)
                }
                {/* 趋势管理*/}
                <Text style={styles.groupTitle}>趋势管理</Text>
                {/* 自定义语言*/}
                {this.getItem(MORE_MENU.Custom_Language)}
                {/* 语言排序*/}
                <View style={GlobalStyles.line}/>
                {this.getItem(MORE_MENU.Sort_Language)}

                {/* 最热管理*/}
                <Text style={styles.groupTitle}>最热管理</Text>
                {/* 自定义标签*/}
                {this.getItem(MORE_MENU.Custom_Key)}
                {/* 标签排序*/}
                {this.getItem(MORE_MENU.Sort_Key)}
                {/* 标签移除*/}
                <View style={GlobalStyles.line}/>
                {this.getItem(MORE_MENU.Remove_Key)}

                {/* 设置*/}
                <Text style={styles.groupTitle}>设置</Text>
                {/* 自定义主题*/}
                {this.getItem(MORE_MENU.Custom_Theme)}
                {/* 关于作者*/}
                <View style={GlobalStyles.line}/>
                {this.getItem(MORE_MENU.About_Author)}
                <View style={GlobalStyles.line}/>
                {/* 反馈 */}
                {this.getItem(MORE_MENU.Feedback)}


            </ScrollView>
        </View>
    }

    onClick() {

    }

}

const styles = StyleSheet.create({
    welcome: {
        flex: 1,
        // alignItems: 'center',
        // justifyContent: 'center',
    },
    about_left: {
        flexDirection: 'row',
        alignItems: 'center',
    },
    item: {
        backgroundColor: 'white',
        padding: 10,
        height: 90,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
    },
    settingItemContainer: {
        backgroundColor: 'white',
        padding: 10,
        height: 60,
        alignItems: 'center',
        justifyContent: 'space-between',
        flexDirection: 'row',
    },
    groupTitle: {
        marginLeft: 10,
        marginRight: 10,
        marginBottom: 5,
        fontSize: 12,
        color: 'gray',
    },
})
const mapState = state => ({})
const mapDispatch = dispatch => ({
    onThemeChange: theme => dispatch(actions.onThemeChange(theme))
})
export default connect(mapState, mapDispatch)(MyPage)
